<template>
    <div>
        <el-dialog
            :visible.sync="is_show"
            title="修改订单"
            center
            @closed="closed"
        >
            <div>
                <el-form :model="form" ref="edit-form" :rules="rules">
                    <el-row>
                        <el-col :span="11">
                            <el-form-item
                                label="专利权人"
                                prop="patent_user"
                            >
                                <el-autocomplete
                                    v-model="form.patent_user"
                                    :fetch-suggestions="querySearch"
                                    :trigger-on-focus="false"
                                    placeholder="请输入专利权人"
                                    :validate-event='false'>
                                </el-autocomplete>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11" :offset="2">
                            <el-form-item
                                label="发明人姓名"
                                prop="user_name"
                            >
                                <el-input v-model="form.user_name" placeholder="请输入发明人姓名"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item
                                label="身份证号"
                                prop="id_card"
                            >
                                <el-input v-model="form.id_card" placeholder="请输入身份证号"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11" :offset="2">
                            <el-form-item
                                label="联络人"
                                prop="liaisons"
                            >
                                <el-input v-model="form.liaisons" placeholder="请输入联络人"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item
                                label="联络人邮箱"
                                prop="liaisons_email"
                            >
                                <el-input v-model="form.liaisons_email" placeholder="请输入联络人邮箱"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11" :offset="2">
                            <el-form-item
                                label="联络人电话"
                                prop="liaisons_tel"
                            >
                                <el-input v-model="form.liaisons_tel" placeholder="请输入联络人电话"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item
                                label="备注"
                                prop="remarks"
                            >
                                <el-input v-model="form.remarks" placeholder="请输入备注"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <template slot="footer">
                <el-button @click="is_show = false" v-no-more-click:3000>取消</el-button>
                <el-button type="primary" @click="submit" v-no-more-click:3000>确认</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { validateName, validateId, validatePhone, validateEmail } from '~/util/index'
export default {
    data() {
        return {
            is_show: false,
            order_id: null,
            allPatent: [],
            form: {
                patent_user: '',
                user_name: '',
                id_card: '',
                liaisons: '',
                liaisons_email: '',
                liaisons_tel: '',
                remarks: ''
            },
            rules: {
                user_name: [{required: false, validator: validateName, trigger: 'blur'}],
                id_card: [{required: false, validator: validateId, trigger: 'blur'}],
                liaisons_tel: [{required: false, validator: validatePhone, trigger: 'blur'}],
                liaisons_email: [{required: false, validator: validateEmail, trigger: 'blur'}],
            }
        }
    },

    created() {
        this.getAllPatent()
    },

    methods: {
        showOn(data) {
            if (data) {
                for(let i in this.form) {
                    this.form[i] = data[i]
                }
                this.order_id = data.id
                this.is_show = true
            }
        },
        submit() {
            this.$refs['edit-form'].validate(valid => {
                if (valid) {
                    this.submitPost()
                } else {
                    this.$message({
                        type: 'error',
                        message: '校验失败，请检查填写的资料'
                    })
                    return false;
                }
            })
        },
        submitPost() {
            if (this.order_id) {
                if (this.form.remarks == '') {
                    delete this.form.remarks
                }
                this.$axios.put(`/api/order/${this.order_id}`, this.form).then(res => {
                    if (res.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '订单修改成功'
                        })
                        this.$emit('refresh', this.form)
                        this.is_show = false
                    }
                })
            } else {
                this.$message({
                    type: 'error',
                    message: '该订单不允许修改。'
                })
            }

        },
        closed() {
            this.$refs['edit-form'].resetFields()
        },
        querySearch(queryString, cb) {
            let that = this
            let patent = this.allPatent
            let results = []
            if (patent.length > 0) {
                results = queryString ? patent.filter(that.createFilter(queryString)) : patent
            }
            cb(results)
        },
        createFilter(queryString) {
            return returnVal => {
                //===0代表从首个字符处匹配必须成功，>=0代表从任意字符处匹配必须成功
                return (returnVal.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0)
            };
        },
        getAllPatent() {
            this.$axios.get('api/order/patent').then(res => {
                if (res.data.code == 200) {
                    let arr = [];
                    let arrItem = {}
                    for (let i = 0; i < res.data.data.length; i++) {
                        //element的模糊匹配组件el-autocomplete指定：必须数组的每个元素是个对象，并且有value属性
                        let arrItem = {}
                        arrItem.value = res.data.data[i];
                        arr.push(arrItem)
                    }
                    this.allPatent = arr
                }
            })
        },
    }
}
</script>

<style lang="less" scoped>
/deep/.el-dialog {
    .el-dialog__body {
        padding-bottom: 0;
        .el-cascader, .el-select, .el-autocomplete {
            width: 100%;
        }
    }
    .el-dialog__footer {
        text-align: center;
    }
}
</style>
